<template>
  <div>
    MyBind
    <input type="text" v-focus="num"><br>
    <button @click="addNum" style="background-color: red">add num</button>
    <p v-demo="msg" v-color-swatch="color"></p>
    <p v-pin:[direction]="0" style="background-color: red">11111111111</p>
    <div v-demo="colorObject"></div>
  </div>
</template>

<script>
  export default {
    name: "MyBind",
    model: {},
    props: {},
    data() {
      return {
        num: 10,
        msg: 'hello?',
        direction: 'top',
        color: 'red',
        colorObject:{ color: 'white', text: 'hello!' }
      }
    },
    computed: {},
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {
      addNum() {
        this.num += 10
      }
    }
  }
</script>

<style scoped>

</style>
